<template>
    <div class="total">
        <div class="selectAll">
            <input type="checkbox" v-model="ischeckedAll"><span>全选</span>
        </div>
        <div class="placeholder"></div>
        <div class="select">
            <span>已选</span>
            <em class="select_pro">{{count}}</em>
            <span>件商品</span>
        </div>
        <div class="pro_total">
            <span>合计（不含运费）：</span>
            <em class="sel_total">{{total.toFixed(2)}}</em>
        </div>
        <div class="account">
            <a href="javascript:;"><span>结算</span></a>
        </div>
    </div>
</template>

<script>
export default {
    props:["count","total","ischeckAll"],
    data(){
        return {
            ischeckedAll:this.ischeckAll
        }
    },
    watch:{
        ischeckedAll(){
            this.$emit("update_checkAll",this.ischeckedAll);
        },
        ischeckAll(){
            this.ischeckedAll = this.ischeckAll;
        }
    }
}
</script>

<style scoped>
    span{
        font-family: 'Times New Roman', Times, serif,'SimSun';
        font-size: 12px;
    }
    em{
        font-style: normal;
    }
    .total{
        height: 50px;
        width: 70%;
        min-width: 800px;
        position: fixed;
        bottom: 0;
        background: #e5e5e5;
    }
    .selectAll,.select,.pro_total,.placeholder,.account{
        float: left;
        display: flex;
        align-items: center;
        height: 50px;
    }
    .select{
        width: 90px;
    }
    .select>.select_pro{
        color: #ff4400;
        font-weight: bolder;
        font-size: 17px;
    }
    .pro_total>.sel_total{
        color: #ff4400;
        font-weight: bolder;
        font-size: 20px;
    }
    .pro_total{
        margin: 0 0 0 5px;
    }
    .account{
        float: right;
        width: 120px;
    }
    .account>a{
        width: 120px;
        display: block;
        height: 50px;
        text-decoration: none;
        background: #ff4400;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .account>a>span{
        color: #fff;
        font-weight: bolder;
        font-size: 22px;
        font-family: 'Times New Roman', Times, serif,'SimSun';
    }
    .selectAll{
        width: 80px;
    }
    .placeholder{
        width: 300px;
    }
</style>